<template>
	<view class="address_main">
		<view class="return-icon-title">
			<view class="return-icon" @click="returnPre">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="my-address-title">
				我的地址
			</view>
			<view class="manage-text" @click="clickMode">
				{{addressMode}}
			</view>
		</view>

		<!-- 无地址 -->
		<view class="address_content" v-if="addressArray.length <= 0">
			<image src="@/static/image/empty_box.png" mode="aspectFill" class="empty_box_image"></image>
			<view class="empty-tip">
				您还没有收货地址，先添加一个吧！
			</view>
		</view>

		<!-- 有地址 -->
		<view class="address_content1" v-else>
			<view class="address_content_per" v-for="(item,index) in addressArray" :key="index">
				<view class="default_name_phone_address">
					<view class="default_name_phone">
						<view class="default_selected_label" v-if="item.isDefault">
							<uni-tag :inverted="true" text="默认" type="success" />
						</view>
						<view class="addressee">
							{{item.addressee}}
						</view>
						<view class="address_phone">
							{{item.phone}}
						</view>
					</view>
					<view class="detail_address">
						{{item.province}}&nbsp;{{item.city}}&nbsp;{{item.county}}&nbsp;{{item.detailAddress}}
					</view>
				</view>
				<view class="edit_icon" @click="toEditAddress(item)" v-if="addressMode==='管理'">
					<uni-icons type="compose" size="24"></uni-icons>
				</view>
				<view class="radio-item" v-else>
					<label class="radio">
						<radio :checked="item.isSelected" color="#66596b" @click="clickItemRadio(item)" />
					</label>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<view class="add_new_address_btn" @click="gotoCreateNewAddress" v-if="addressMode === '管理'">
				<button>创建新地址</button>
			</view>
			<view class="all-select-delete" v-if="addressMode === '完成' && addressArray.length > 0">
				<view class="all-select">
					<label class="radio">
						<radio :checked="isAllSelect" color="#66596b" @click="allSelect" /><text>全选</text>
					</label>
				</view>
				<view class="delete-btn" @click="deleteAddress">
					<button type="default">删除</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getAddressList,
		deleteAddress
	} from '@/request/user.js';
	import mitter from '@/common/mitt/eventBus.js'
	export default {
		data() {
			return {
				isAllSelect: false,
				addressMode: '管理',
				addressArray: [
					// {
					// 	addressAid: 1,
					// 	isSelected: false,
					// 	isDefault: false,
					// 	addressee: '范占国',
					// 	phone: '+86 183****8391',
					// 	province: '浙江省',
					// 	city: '金华市',
					// 	county: '永康市',
					// 	detailAddress: '前仓镇金鸡路170号',
					// },
					// {
					// 	addressAid: 2,
					// 	isSelected: false,
					// 	isDefault: true,
					// 	addressee: '李慧',
					// 	phone: '+86 183****7345',
					// 	province: '云南省',
					// 	city: '楚雄市',
					// 	county: '南华县',
					// 	detailAddress: '王东村02号',
					// },
					// {
					// 	addressAid: 3,
					// 	isSelected: false,
					// 	isDefault: false,
					// 	addressee: '王林',
					// 	phone: '+86 186****6009',
					// 	province: '云南省',
					// 	city: '曲靖市',
					// 	county: '宣威市',
					// 	detailAddress: '南京路180号',
					// },
				], // 我的所有地址

			}
		},

		onLoad() {
			// 获取我的地址列表
			this.getAddressListFunc();
		},

		mounted() {
			const self = this;
			mitter.on('getAddressList', (data) => {
				if (data) {
					// 获取我的地址列表
					self.getAddressListFunc();
				}
			})
		},

		beforeDestroy() {
			mitter.off('getAddressList');
		},

		methods: {

			// 获取我的地址列表
			getAddressListFunc() {
				this.addressArray = [];
				getAddressList().then(res => {
					// console.log(res);
					this.addressArray = res.data.data;
				}).catch(err => {
					console.error(err);
					uni.showToast({
						title: '获取数据失败，请稍后再试...',
						icon: 'none'
					})
				})
			},

			radioClick(index) {

			},
			// 去编辑地址
			toEditAddress(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/template/createNewAddressPage?addressAid=${item.addressAid}`
				})
			},
			// 去创建新地址
			gotoCreateNewAddress() {
				uni.navigateTo({
					url: '/pages/tabBar/template/createNewAddressPage?addressAid=0'
				})
			},
			// 点击管理
			clickMode() {
				if (this.addressMode === '管理') {
					this.addressMode = '完成'
				} else {
					this.addressMode = '管理'
				}
			},
			// 全选
			allSelect() {
				this.isAllSelect = !this.isAllSelect
				this.addressArray.forEach(item => {
					item.isSelected = this.isAllSelect
				})
			},
			// 勾选某一个地址的radio
			clickItemRadio(item) {
				item.isSelected = !item.isSelected;
				// 检查addressArray中所有项的isSelected是否都为true
				const allSelected = this.addressArray.every(subItem => subItem.isSelected);
				this.isAllSelect = allSelected;
			},
			// 返回上一页
			returnPre() {
				uni.navigateBack()
			},
			// 点击删除按钮
			deleteAddress() {
				const that = this;
				const data = {
					isAllSelect: that.isAllSelect,
					addressArray: that.addressArray
				}
				console.log(data);
				if (that.isAllSelect) {
					uni.showModal({
						title: '提示',
						content: '确定删除所有地址吗？',
						cancelText: '再想想',
						cancelColor: '#66596b',
						confirmText: '想好了',
						confirmColor: '#66596b',
						success(res) {
							if (res.confirm) {
								deleteAddress(data).then(r => {
									console.log(r);
									if (r.data.code === 10000) {
										uni.showToast({
											title: '删除成功'
										})
										that.addressArray = [];
									} else {
										uni.showToast({
											title: '删除失败，请稍后再试...',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定删除吗？',
						cancelText: '再想想',
						cancelColor: '#66596b',
						confirmText: '想好了',
						confirmColor: '#66596b',
						success(res) {
							if (res.confirm) {
								deleteAddress(data).then(r => {
									console.log(r);
									if (r.data.code === 10000) {
										uni.showToast({
											title: '删除成功'
										})
										// 使用 filter 方法过滤掉选中的地址，实现删除选中项的效果
										that.addressArray = that.addressArray.filter(item => !item
											.isSelected);
									} else {
										uni.showToast({
											title: '删除失败，请稍后再试...',
											icon: 'none'
										})
									}
								})
							}
						}
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.address_main {
		.return-icon-title {
			width: 90%;
			padding-top: 80rpx;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.my-address-title {
				font-size: 36rpx;
			}

		}

		.address_content {
			text-align: center;
			width: 100%;
			height: 80vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.empty_box_image {
				width: 200rpx;
				height: 200rpx;
			}

			.empty-tip {
				font-size: 23rpx;
				color: #a8a8a8;
				letter-spacing: 2rpx;
			}
		}

		.address_content1 {
			margin-top: 60rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			width: 90%;
			height: 1000rpx;

			.address_content_per {
				display: flex;
				margin-bottom: 30rpx;
				align-items: center;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				justify-content: space-between;

				.default_name_phone_address {
					width: 86%;

					.default_name_phone {
						display: flex;

						.default_selected_label {
							margin-right: 20rpx;
						}

						.addressee {
							font-size: 35rpx;
							font-weight: bold;
						}

						.address_phone {
							margin-left: 20rpx;
							color: #848484;
							display: flex;
							align-items: center;
						}
					}

					.detail_address {
						margin-top: 20rpx;
						line-height: 1.5;
						font-size: 26rpx;
					}
				}

				.edit_icon {
					display: flex;
					align-items: center;
				}

				.radio-item {}
			}
		}

		.bottom-btn {
			height: 100rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;

			.add_new_address_btn {
				width: 100%;
				padding-left: 30rpx;
				padding-right: 30rpx;

				button {
					font-size: 35rpx;
					border-radius: 80rpx;
					background-color: #66596b;
					color: #fff;
				}
			}

			.all-select-delete {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.delete-btn {
					button {
						width: 300rpx;
						height: 80rpx;
						font-size: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #66596b;
						color: #fff;
						letter-spacing: 3rpx;
						border-radius: 50rpx;
					}
				}
			}
		}


	}
</style>